<!DOCTYPE html>
<head>
<meta charset="UTF-8"> 
<title>pyxterm</title>
<!--
  pyxterm: Basic Python socket implementation for term.js

  Example template
  Modified by: R. Saravanan <sarava@sarava.net> 2014
  Original Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
-->
<style>
  html {
    background: #555;
  }

  h1 {
    margin-bottom: 20px;
    font: 50px/1.5 sans-serif;
  }
  .terminal {
    font-size: 16px;
  }
</style>
<script src="{{ xstatic('termjs', 'term.js') }}"></script>
<script src="{{ static('js/terminado.js') }}"></script>
<script>
window.onload = function() {
    // Test size: 25x80
    var termRowHeight = 0.0 + 1.00*document.getElementById("dummy-screen").offsetHeight / 17;
    var termColWidth = 0.0 + (1.02*document.getElementById("dummy-screen-rows").offsetWidth / 55);
    document.getElementById("dummy-screen").setAttribute("style", "display: none");

    var protocol = (window.location.protocol.indexOf("https") === 0) ? "wss" : "ws";
    var ws_url = protocol+"://"+window.location.host+ "{{ws_url_path}}";
    
    function calculate_size(element) {
        var rows = Math.max(2, Math.floor(element.innerHeight/termRowHeight)-1);
        var cols = Math.max(3, Math.floor(element.innerWidth/termColWidth)-1);
        console.log("resize:", termRowHeight, termColWidth, element.innerHeight,
                                        element.innerWidth, rows, cols);
        return {rows: rows, cols: cols};
    }

    size = calculate_size(window);
    var terminal = make_terminal(document.body, size, ws_url);
    
    window.onresize = function() { 
      var geom = calculate_size(window);
      terminal.term.resize(geom.cols, geom.rows);
      terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
                                window.innerHeight, window.innerWidth]));
    };
};
</script>
</head>
<body>
<!-- test size: 25x80 -->
<pre id="dummy-screen" style="visibility:hidden; border: white solid 5px; font-family: &quot;DejaVu Sans Mono&quot;, &quot;Liberation Mono&quot;, monospace; font-size: 11px;">0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
<span id="dummy-screen-rows" style="visibility:hidden;">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
</pre>
</body>
